<ion-navbar *navbar>
  <ion-title>Profile</ion-title>
</ion-navbar>

<ion-content padding class="profile" *ngIf="!auth.authenticated()">

  <div padding>
    <ion-segment [(ngModel)]="authType">
      <ion-segment-button value="login">
        登录
      </ion-segment-button>
      <ion-segment-button value="signup">
        注册
      </ion-segment-button>
    </ion-segment>
  </div>

  <div [ngSwitch]="authType">

    <form *ngSwitchWhen="'login'" #loginCreds="ngForm" (ngSubmit)="login(loginCreds.value)">
      <ion-item>
        <ion-label>Username</ion-label>
        <ion-input type="text" ngControl="username"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label>Password</ion-label>
        <ion-input type="password" ngControl="password"></ion-input>
      </ion-item>

      <div padding>
        <button block type="submit">登录</button>
      </div>
    </form>

    <form *ngSwitchWhen="'signup'" #signupCreds="ngForm" (ngSubmit)="signup(signupCreds.value)">
      <ion-item>
        <ion-label>Username</ion-label>
        <ion-input type="text" ngControl="username"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label>Password</ion-label>
        <ion-input type="password" ngControl="password"></ion-input>
      </ion-item>

      <div padding>
        <button block type="submit">注册</button>
      </div>

    </form>
  </div>
</ion-content>

<ion-content>
  <div *ngIf="auth.authenticated()">
    <div padding>
      <h1>Welcome, {{ user }}</h1>
      <h2 *ngIf="user_info">Last login {{user_info.last_login}}</h2>
      <button block (click)="logout()">Logout</button>
    </div>
  </div>
</ion-content>
